<template>
    <div>
        <h1>{{ count }}</h1>
        <button @click="count++">+1</button>
        <button @click="count--">-1</button>
        <h1> {{ counterObject.message }} </h1>
        <button @click="counterFunction()">test</button>
    </div>
</template>

<script setup>
const props = defineProps({
    count: {
        type: Number,
        default: 0
    },
    // 对象或数组的默认值
    // 必须从一个工厂函数返回，该函数接收组件所接收的原始props作为参数
    counterObject: {
        type: Object,
        default(rawProps) {
            console.log('没传值')
            console.log(rawProps)
            return { message: 'Hello Counter!' }
        }
    },
    counterFunction: {
        type: Function,
        default() {
            console.log('传值函数的调用...')
            return null
        }
    }
})
onMounted(() => {
    props.counterFunction()
})
import { onMounted, ref } from 'vue';
// const count = ref(0)
</script>